<template>
  <div class="mian">
    <!-- 标题 -->
    <Title title="主要资料" />
    <!-- 主要项目表格 -->
    <Card :sub-title="mainProjectData.title" :tip="mainProjectData.tip">
      <div slot="content">
        <TableForm
          ref="projectTableForm"
          :config="mainProjectData"
          style="margin: 20px"
          @submit="projectSubmit"
        />
        <div class="btn-group">
          <div class="add-btn" @click="handleAddRow('projectTableForm')">
            <span class="add-icon">+</span>
            <span>增加行数</span>
          </div>
          <div
            class="upload-btn"
            @click="handleDownload('主要项目模版', fieldList.projectTableForm)"
          >
            <i class="el-icon-download" />
            <span>下载模版</span>
          </div>
          <div class="upload-btn" @click="handleUpload('projectTableForm')">
            <i class="el-icon-upload2" />
            <span>上传模版</span>
          </div>
        </div>
      </div>
    </Card>
    <!-- 主要论文表格 -->
    <Card :sub-title="paperData.title" :tip="paperData.tip">
      <div slot="content">
        <TableForm
          ref="paperTableForm"
          :config="paperData"
          style="margin: 20px"
          @submit="paperSubmit"
        />
        <div class="btn-group">
          <div class="add-btn" @click="handleAddRow('paperTableForm')">
            <span class="add-icon">+</span>
            <span>增加行数</span>
          </div>
          <div
            class="upload-btn"
            @click="handleDownload('主要论文模版', fieldList.paperTableForm)"
          >
            <i class="el-icon-download" />
            <span>下载模版</span>
          </div>
          <div class="upload-btn" @click="handleUpload('paperTableForm')">
            <i class="el-icon-upload2" />
            <span>上传模版</span>
          </div>
        </div>
      </div>
    </Card>
    <!-- 主要著作表格 -->
    <Card :sub-title="mainBookData.title" :tip="mainBookData.tip">
      <div slot="content">
        <TableForm
          ref="bookTableForm"
          :config="mainBookData"
          style="margin: 20px"
          @submit="bookSubmit"
        />
        <div class="btn-group">
          <div class="add-btn" @click="handleAddRow('bookTableForm')">
            <span class="add-icon">+</span>
            <span>增加行数</span>
          </div>
          <div
            class="upload-btn"
            @click="handleDownload('主要著作模版', fieldList.bookTableForm)"
          >
            <i class="el-icon-download" />
            <span>下载模版</span>
          </div>
          <div class="upload-btn" @click="handleUpload('bookTableForm')">
            <i class="el-icon-upload2" />
            <span>上传模版</span>
          </div>
        </div>
      </div>
    </Card>
    <!-- 主要获奖表格 -->
    <Card :sub-title="prizeWinningData.title" :tip="prizeWinningData.tip">
      <div slot="content">
        <TableForm
          ref="winTableForm"
          :config="prizeWinningData"
          style="margin: 20px"
          @submit="prizeWinningSubmit"
        />
        <div class="btn-group">
          <div class="add-btn" @click="handleAddRow('winTableForm')">
            <span class="add-icon">+</span>
            <span>增加行数</span>
          </div>
          <div
            class="upload-btn"
            @click="handleDownload('主要获奖模版', fieldList.winTableForm)"
          >
            <i class="el-icon-download" />
            <span>下载模版</span>
          </div>
          <div class="upload-btn" @click="handleUpload('winTableForm')">
            <i class="el-icon-upload2" />
            <span>上传模版</span>
          </div>
        </div>
      </div>
    </Card>
    <!-- 发明专利表格 -->
    <Card :sub-title="patentData.title" :tip="patentData.tip">
      <div slot="content">
        <TableForm
          ref="patentTableForm"
          :config="patentData"
          style="margin: 20px"
          @submit="patentSubmit"
        />
        <div class="btn-group">
          <div class="add-btn" @click="handleAddRow('patentTableForm')">
            <span class="add-icon">+</span>
            <span>增加行数</span>
          </div>
          <div
            class="upload-btn"
            @click="handleDownload('发明专利模版', fieldList.patentTableForm)"
          >
            <i class="el-icon-download" />
            <span>下载模版</span>
          </div>
          <div class="upload-btn" @click="handleUpload('patentTableForm')">
            <i class="el-icon-upload2" />
            <span>上传模版</span>
          </div>
        </div>
      </div>
    </Card>
    <!-- 标准规范表格 -->
    <Card :sub-title="standardData.title" :tip="standardData.tip">
      <div slot="content">
        <TableForm
          ref="standardTableForm"
          :config="standardData"
          style="margin: 20px"
          @submit="standardSubmit"
        />
        <div class="btn-group">
          <div class="add-btn" @click="handleAddRow('standardTableForm')">
            <span class="add-icon">+</span>
            <span>增加行数</span>
          </div>
          <div
            class="upload-btn"
            @click="handleDownload('标准规范模版', fieldList.standardTableForm)"
          >
            <i class="el-icon-download" />
            <span>下载模版</span>
          </div>
          <div class="upload-btn" @click="handleUpload('standardTableForm')">
            <i class="el-icon-upload2" />
            <span>上传模版</span>
          </div>
        </div>
      </div>
    </Card>
    <!-- <el-button type="primary" @click="handleSubmit">提交</el-button> -->
    <UploadExcel ref="upload" :on-success="onSuccess" />
  </div>
</template>

<script>
import config from './config'
import { uploadMixin } from '@/mixin/upload'
import { submitMainInfo, getMainInfo, saveMainInfo } from '@/api/personnel'

export default {
  mixins: [uploadMixin],
  data () {
    return {
      title: '',
      // 主要项目表格
      mainProjectData: config.mainProjectData,
      // 主要著作表格
      mainBookData: config.mainBookData,
      // 主要获奖表格
      prizeWinningData: config.prizeWinningData,
      // 发明专利表格
      patentData: config.patentData,
      // 标准规范表格
      standardData: config.standardData,
      paperData: config.paperData,
      fieldList: config.fieldList,
      form: {
        project: '',
        paper: '',
        work: '',
        award: '',
        patent: '',
        standard: ''
      }
    }
  },
  mounted () {
    // this.$refs.projectTableForm.setData([
    //   {
    //     projectName:
    //       '限填5项，其余项目在“其他成果”填写或直接上传著作清单自动匹配表格'
    //   }
    // ])
  },
  created () {
    // 设置标题
    this.title = this.$route.meta.title
    this.getMainInfo()
  },

  methods: {
    // 添加行
    handleAddRow (name) {
      this.$refs[name].add()
    },
    // 主要项目数据提交
    projectSubmit (res) {
      this.form.project = JSON.stringify(res)
    },
    paperSubmit (res) {
      this.form.paper = JSON.stringify(res)
    },
    // 主要著作数据提交
    bookSubmit (res) {
      this.form.work = JSON.stringify(res)
    },
    // 获奖表格数据提交
    prizeWinningSubmit (res) {
      this.form.award = JSON.stringify(res)
    },
    // 发明专利表格数据
    patentSubmit (res) {
      this.form.patent = JSON.stringify(res)
    },
    // 标准规范表格数据
    standardSubmit (res) {
      this.form.standard = JSON.stringify(res)
    },
    handleSubmit (type) {
      this.$refs.projectTableForm.submit()
      this.$refs.paperTableForm.submit()
      this.$refs.bookTableForm.submit()
      this.$refs.winTableForm.submit()
      this.$refs.patentTableForm.submit()
      this.$refs.standardTableForm.submit()
      if (type === 1) {
        this.saveMainInfo()
      } else {
        this.submitMainInfo()
      }
    },
    // 提交
    async submitMainInfo () {
      await submitMainInfo(this.form)
      this.$message.success('提交成功')
    },
    // 保存
    async saveMainInfo () {
      await saveMainInfo(this.form)
      this.$message.success('保存成功')
    },
    // 上传成功的回调函数
    onSuccess (e) {
      let dataStr = JSON.stringify(e.results)
      Object.keys(this.fieldList[this.currentUpload]).forEach((key) => {
        dataStr = dataStr.replaceAll(key, this.fieldList[this.currentUpload][key])
      })
      const data = JSON.parse(dataStr)
      console.log(data)
      this.$refs[this.currentUpload].setData(data, true)
    },
    // 获取其他信息
    async getMainInfo () {
      const res = await getMainInfo()
      // 主要资料
      if (!res.data) return
      const { project, paper, work, award, patent, standard } = res.data
      this.$refs.projectTableForm.setData(project ?? [])
      this.$refs.paperTableForm.setData(paper ?? [])
      this.$refs.bookTableForm.setData(work ?? [])
      this.$refs.winTableForm.setData(award ?? [])
      this.$refs.patentTableForm.setData(patent ?? [])
      this.$refs.standardTableForm.setData(standard ?? [])
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-group {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 16px;

  .add-btn {
    display: flex;
    align-items: center;
    color: #2860c3;
    cursor: pointer;
    .add-icon {
      position: relative;
      top: -2px;
    }
  }
  .upload-btn {
    margin-left: 30px;
    cursor: pointer;
  }
}
</style>
